<template>
	<view>
		<view class="search">
			<u-notice-bar mode="horizontal" :is-circular="false" :text="title"></u-notice-bar>
		</view>
		
		<!-- 上层信息框 -->
		<view class="topInfo baseBack">
			<view class="cardNumber">{{formData.devNum}}</view>
			<view style="color:#AC58FA;margin-top: 20rpx;margin-left: 10rpx;margin-right: auto;">号机台</view>
			<view style="margin-right: 50rpx;margin-top: 50rpx;color:grey;">SN:{{formData.sn}}</view>
		</view>
		
		<!-- 虚线勿动 -->
		<view class="conUp">
			<view class="splitArea"></view>
		</view>
		
		<!-- 中层信息框 -->
		<view class="middleInfo baseBack">

      <view style="padding-bottom: 10rpx; color: grey;">
        <view class="pp"></view>
        <text style=" letter-spacing: 10rpx;">员工姓名：</text>
        <text class="pv">{{formData.nickName}}</text>
      </view>
      <view style="padding-bottom: 15rpx; color: grey;">
        <view class="pp"></view>
        <text style=" letter-spacing: 10rpx;">员工工号：</text>
        <text class="pv">{{formData.code}}</text>
      </view>
	  <view style="padding-bottom: 15rpx; color: grey;">
	    <view class="pp"></view>
	    <text style=" letter-spacing: 10rpx;">联系电话：</text>
	    <text class="pv">{{formData.phonenumber}}</text>
	  </view>
      <view style="padding-bottom: 15rpx; color: grey;">
        <view class="pp"></view>
        <text style=" letter-spacing: 10rpx;"> 卡 类 型：</text>
        <text class="pv">{{formData.cardType | cardType}}</text>
      </view>
      <view style="padding-bottom: 15rpx; color: grey;">
        <view class="pp"></view>
        <text style=" letter-spacing: 10rpx;">员工卡号：</text>
        <text class="pv">{{formData.empDec | empDec}}</text>
      </view>
		</view>
		
		<!-- 虚线勿动 -->
		<view class="conUp">
			<view class="splitArea"></view>
		</view>

		<!-- 下层信息框 -->
		<view class="downInfo baseBack">
			<!-- <view class="flex">
				<view style="margin-left: auto;margin-right: 40rpx;">
					小计：
					<text class="price">300.00</text>
					<text style="color: #AC58FA;">元</text>
				</view>
			</view>
			<view style="padding-bottom: 15rpx; color: grey;">
				<view class="pp"></view>
				备注：
				<text class="pv">— —</text>
			</view> -->
			<button type="primary" v-show="formData.empSn && formData.empDec" class="block bg-blue lg round" style="width: 80%;margin-bottom: 10px;"
				@click="determine()">保存</button>
			<button type="primary" v-show="!formData.empSn && !formData.empDec" :disabled="disabled" class="block bg-blue lg round" style="width: 80%;margin-bottom: 10px;"
				@click="sendBind()">下发绑卡</button>	
		</view>
		<view>
			<!-- 提示窗示例 -->
			<uni-popup ref="alertDialog" type="dialog">
				<uni-popup-dialog cancelText="关闭" confirmText="确定" title="通知" content="确定要修改该员工信息吗？" @confirm="dialogConfirm"
					></uni-popup-dialog>
			</uni-popup>
		</view>
		<watermark :text="companyName"></watermark>
	</view>
</template>

<script>
import {
	getEmpInfoBysn,
	sendInfo
} from "@/api/company/device.js";
import{updateUser} from '@/api/system/user.js'
import watermark from 'components/warter/watermark.vue'
export default {
	components:{watermark},
	filters:{
		cardType(value){
			switch(value){
				case 1:
					return '员工卡'
				case 2:
					return '保全卡'
				case 3:
					return '电工卡'
				case 16:
					return '管理卡'
				default:
					return ''
			}
		},
		empDec(value){
			if(!value){
				return ''
			}else{
				return value
			}
		}
	},
	data() {
	  return {
		  title:'下发绑卡指令后，等待机台面板出现刷卡提示，再刷卡，返回员工卡号无误，确认保存！',
		companyName:this.$store.getters.name,
		disabled:false,
		terval:'',
		timeout:'',
		formData: {
			userName: '',
			nickName: '',
			password: '',
			phonenumber: '',
			userType: '',
			remark: '',
			code:'',
			cardType:'',
			companyId: '',
			empSn:'',
			sn:'',
			devNum:'',
			empDec:''
		},
	  }
	},
	onLoad(options) {
		if(options.user){
			this.formData = JSON.parse(decodeURIComponent(options.user));
		}
		if(options.dev){
			let dev = JSON.parse(decodeURIComponent(options.dev));
			this.formData.sn = dev.devSn
			this.formData.devNum = dev.devNum
		}
		
	},
	onUnload() {
		if(this.terval){
			clearInterval(this.terval)
		}
		if(this.timeout){
			clearTimeout(this.timeout)
		}		
	},
	methods:{
		//下发绑卡指令
		sendBind(){
			sendInfo(this.formData).then(res =>{
				if (res.code == 200) {
					this.disabled = true
					uni.showLoading({title: '请等待采集器提示刷卡...',icon: 'none',mask:true})
					
					 this.terval = setInterval(() => {
						 getEmpInfoBysn(this.formData).then(res =>{
							 if(res.code == 200 && res.data !== null){
								 this.formData.empSn = res.data.empSn
								 this.formData.empDec = res.data.empDec
								 if(this.terval) clearInterval(this.terval);
								 this.terval = null
								 this.disabled = false
								 uni.hideLoading()
								 this.$modal.msgSuccess("识别成功")
							 }
						 }).catch(()=>{
								if(this.terval){
									clearInterval(this.terval)
									uni.hideLoading()
									this.terval = null
									this.disabled = false
								}
								if(this.timeout){
									clearTimeout(this.timeout)
								}
							})
					},3000)
					this.timeout = setTimeout(() =>{
						if(this.terval){
							clearInterval(this.terval)
							uni.hideLoading()
							this.$modal.msg("绑卡超时,请重新选择设备发送指令")
							this.terval = null
							this.disabled = false
						}
					},60000*2)
				} else {
					that.$modal.msgError(res.msg)
				}
			})
		},
		//点击保存按钮
		determine() {
			this.$refs.alertDialog.open();
		},
		//点击确认按钮
		dialogConfirm(){
			let that = this
			uni.showLoading()
			updateUser(that.formData).then(res => {
						if (res.code == 200) {
							uni.hideLoading()
							that.$modal.msgSuccess("修改信息成功!")
							this.$tab.navigateBack()
						} else {
							that.$modal.loading(res.msg)
						}
					}).catch(()=>{
						that.formData.empSn = ''
						that.formData.empDec = ''
					})
			this.$refs.alertDialog.close();	
		},
	}
}
	
	
</script>

<style>
	
	.cardNumber{
		margin-right: auto;
		color: #AC58FA;
		font-size: 45rpx;
		margin: 40rpx 0rpx 40rpx 40rpx;
	}
	
	.topInfo{
		align-items: center;
		display: flex;
		height: 100rpx;
		margin: 48rpx auto 0rpx auto;
	}
	.middleInfo{
		margin: 0rpx auto;
	}
	.downInfo{
		padding-bottom: 40rpx;
		margin: 0rpx auto;
	}
	
	.conUp{
	   width: 92%; 
	   height: 70rpx;
	   display: flex;
	   align-items: center;
	   justify-content: center;
	   background-image: radial-gradient(circle at 448rpx 50rpx ,transparent 0%, transparent 8px,#fff 8px, #fff 100%);
	   background-position: 244rpx -16rpx;
	   margin: 0rpx auto;
	}
	
	.splitArea {
	  border: none;
	  border-top: 3rpx dashed #d8d8d8;
	  width: 85%;
	}
	
	.search{
		background-color: #fff;
		height: 100rpx;
	}
	
	.baseBack{
		width: 92%;
		background-color: #fff;
	}
	.price{
		color: #AC58FA;
		font-size: 50rpx;
	}
	.pp {
	  display: inline-block;
	  width: 10rpx;
	  height: 10rpx;
	  border-radius: 50%;
	  background-color: grey;
	  margin: 0rpx 30rpx 0rpx 50rpx;
	}
	.pv{
		font-weight: bold;
		margin-right: 6rpx;
		color: black;
	}
	
</style>